<template>
    <div class="minbox" v-if="isshow">
        <van-nav-bar  title="用户转接" left-arrow  @click-left="msgBoxGoBack"/>
        <div class="listbox">
            <div class="item" v-for="(item,index) in list" :key="index" @click="userTransfer(item)">
                <div class="headpic">
                    <img :src="item.header_url?URL.server+item.header_url:'http://suo.im/4nci1t'" alt="">
                </div>
                <div class="info">
                    账号：<span>{{item.username}}</span><br>
                    昵称：<span>{{item.nickname}}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
      data:function(){
          return {
              list:[

              ]
          }
      },
      props: ['isshow'],
      watch:{
          isshow:function(){
              var that = this;
              if(this.isshow){
                  $.get(this.URL.server+'/api/Customer_service/getAllCustmerService',{
                      auid:$vm.MsgBox.cs_user.auid
                  },function(res){
                      if(typeof res == 'string') res = JSON.parse(res); 
                      if(res.status == 1){
                          that.list = res.result
                      }
                  });
              }
          },

      },
      updated () {
          
      },
      methods:{
        msgBoxGoBack:function(){
            this.$router.back(-1);
        },
          userTransfer:function(cs_user){
              var that = this;
                this.$dialog.confirm({
                    title: '标题',
                    message: '是否转接给该客服！'
                }).then(() => {
                    $
                }).catch(() => {
                    
                });
          }
      }
  };
</script>
<style lang="less" scoped>
    @keyframes show-in {
        from { transform: translateY(100%);}
        50%  { transform: translateY(50%);}
        to   { transform: translateY(0%);}
    }
    @keyframes show-out {
        from { transform: translateY(0%);}
        50%  { transform: translateY(50%);}
        to   { transform: translateY(100%);}
    }
    .minbox{
        position: fixed;top:0;left:0;width:100%;height:100%;z-index: 999;background:#fff;animation: show-in 0.3s linear 1;display: inline-block;
        .out{
            animation: show-out 0.3s linear 1;
        }
        .listbox{
            position: absolute;top:46px;bottom:0;overflow: hidden;overflow-y: auto;width:100%;
            .item{
                height:70px;border-bottom: 1px solid #eee;
                .headpic{
                    width:50px;height:50px;margin:10px;float:left;border-radius:50%;background:#fff;
                    img{
                        width:100%;height:100%;border-radius:50%;
                    }
                }
                .info{
                    width:calc(100% - 70px);float:left;height:50px;margin:10px 0;font-size: 16px;line-height: 25px;color:#999;
                    span{
                        color:#333;
                    }
                }
                &:active{
                    background:#eee;
                }
            }
        }
    }
</style>